<template>
    <div class="login" v-cloak>
      <!-- 主体内容 -->
      <div class="Main_content">
        <!-- 二维码 -->
        <div class="code" v-show="selectcode">
          <p class="code_title">个人用户</p>
          <div class="code_text">
            <h6 class="code_safe">微信扫码，安全登录</h6>
            <p class="code_img">
              <img src="../../../static/images/person_user.png" alt="" />
            </p>
            <p class="code_T">
              注：本平台注册的普通用户登录，可选择使用集采中心，厦门高新火炬演中心，企业服务超市等平台相关功能。
              还可以办理知识产权资助申请、园区配套，财税服务，法律服务，人力资源，等相关服务。
            </p>
            <p class="code_foot">
              <span><a @click="login">返回</a></span
              ><span class="code_reg"><a @click="register">立即注册</a></span>
            </p>
          </div>
        </div>
        <!-- 登录 -->
        <div class="user_login code" v-show="selectlogin">
          <div class="login_title">
            <ul class="clearfix">
              <li
                class="text-center"
                v-for="(item) in usertype"
                :class="{'loginactive':logincur === item.id}"
                @click="loginItme(item)"
              >
                {{ item.type }}
              </li>
            </ul>
          </div>
          <div class="form_W">
            <form :model="loginUser" :rules="loginRules"  ref="loginUser" >
              <div class="form_I">
                <span><img src="../../../static/images/user.png" alt=""/></span
                ><input type="text" placeholder="请输入邮箱/手机号" v-model="loginUser.mobile" auto-complete="off" />
              </div>
              <div class="form_I">
                <span><img src="../../../static/images/mima.png" alt=""/></span
                ><input type="password" placeholder="请输入密码"  v-model="loginUser.password" auto-complete="off"  />
              </div>
              <div class="form_YZM">
                <div class="login_in">
                  <span><img src="../../../static/images/yzm.png" alt=""/></span
                  ><input type="text" placeholder="请输入验证码" v-model="loginUser.code" />
                </div>
                <span><img src="../../../static/images/yzm-1.png" alt=""/></span>
              </div>

            </form>
            <span class="forget_M"><a @click="RestePassword">忘记密码？</a></span>
            <button type="button" class="btn btn-primary btn-lg btn-block submissio" :loading="loading" @click="LoginPassword">
              登 录
            </button>
            <p class="code_foot login_foor">
              <span
                ><a @click="code"><img src="../../../static/images/login_er.png" alt=""/></a></span
              ><span class="code_reg"><a  @click="register">立即注册</a></span>
            </p>
          </div>
        </div>

      </div>
    </div>
</template>

<script>


export default{

    data(){
        const validateUsername = (rule, value, callback) => {
      // if (!isvalidUsername(value)) {
        if(value === ''){
        callback(new Error('Please enter the correct user name'))
      } else {
        callback()
      }
    }
    const validatePassword = (rule, value, callback) => {
      if (value.length < 0) {
        callback(new Error('The password can not be less than 6 digits'))
      } else {
        callback()
      }
    }
      return{

        //登录model
      loginUser:{
        mobile:"",
        password:"",
        code:"",
      },

      loginRules: {
        mobile: [{ required: true, trigger: 'blur', validator: validateUsername }],
        password: [{ required: true, trigger: 'blur', validator: validatePassword }]
      },

      cur:0,
      selectcode:false,//二维码
      selectlogin:true,//登录
      logincur:1, //用户类型
      loading:false,
        navD: [
            { id: 1, zt: "首页"},
            { id: 2, zt: "惠企政策"},
            { id: 3, zt: "服务超市 "},
            { id: 4, zt: " 金融云 "},
            { id: 5, zt: "投融资中心" }  ,
            { id: 6, zt: "企业名录   " }  ,
            { id: 7, zt: "企业活动 " }  ,
            { id: 8, zt: "园区配套" }  ,
          ],
          usertype:[{id:1,type:"个人用户"},{id:2,type:"企业用户"}]
          }
    },
    methods:{
        // 首页的登录注册
        selecttheless(){
            this.selectlogin=true;
        },
        getItme(item,index){
            this.cur=index
              switch(index){
                case 2:
                  this.$router.push({ path:'/ServiceSupermarket/Home'})
                  break;

            }
      },

      loginItme(item){
          this.logincur=item.id
      },
    //  登录
    login:function(){
        this.selectcode=false;
        this.selectlogin=true;
    },
    // 二维码
    code:function(){
        this.selectcode=true;
        this.selectlogin=false;
    },

      //重置密码
    RestePassword(){
      this.$router.push({path:'/User/RestePassword'})

    },
    //密码登录
    LoginPassword(){

     console.log(this.$refs)

   this.$refs.loginUser.validate((valid) => {
        if (valid) {
          //逻辑处理
        }
   });



         var jsondata={ mobile:this.loginUser.mobile,password:this.loginUser.password};

         this.post({
                url:'/user/login',
                data: jsondata,
                msg:{show:true},
            }).then(res=>{
                 console.log(res.data)
                 this.$store.dispatch("setLogin",res.data);
                 this.$router.push({path:'/Home/index'})
            }).catch(err=>{
              console.log(err)
            });

        // this.get({
        //         url:'/test/helloworld',
        //         msg:{show:true},
        //     }).then(res=>{
        //         //this.$router.push({path:'/Home/index'})
        //         console.log(res)
        //     }).catch(err=>{

        //       console.log(err)
        //     });

     },



     //注册跳转
     register(){
        switch(this.logincur){
          case 1:
          this.$router.push({path:'/User/PersonalRegistration'})
          break;
          case 2:
          this.$router.push({path:'/User/EnterpriseRegistration'})
          break;

        }

     },



    }
}
</script>
